<template>
    <div id="production">
        <div style="width: 100%;height: 85px;background-color: #FAFAFA;padding-top: 1%;">
            <el-col :xs="3" :sm="3" :md="2" :lg="2" style="margin: 0 0 0 2%">
                <el-input placeholder="工序号" v-model="ProcedureNum"></el-input>
            </el-col>
            <el-col :xs="4" :sm="3" :md="3" :lg="3" style="margin: 0 1%">
                <el-input placeholder="工序名称" v-model="ProcedureName"></el-input>
            </el-col>
            <el-col :xs="8" :sm="8" :md="6" :lg="4" style="text-align: left">
                <el-button type="primary" @click="selectTable">查询</el-button>
                <el-button type="success" @click="add">新增工序</el-button>
            </el-col>
        </div>
<!-- 工序列表 -->
        <el-table class="table_production" max-height="600" stripe border ref="multipleTable0" :data="tableData" tooltip-effect="dark"
                  style="width: 88%;text-align: center !important;">
            <el-table-column prop="index" sortable label="序号"></el-table-column>
            <el-table-column prop="ProcedureNum" sortable label="工序号"></el-table-column>
            <el-table-column prop="ProcedureName" sortable label="工序名称"></el-table-column>
            <el-table-column prop="ProcedureContent" show-overflow-tooltip label="工序内容"></el-table-column>
            <el-table-column prop="Remark" show-overflow-tooltip label="备注"></el-table-column>
            <!--<el-table-column prop="" show-overflow-tooltip label="选中的工站"></el-table-column>-->
            <!-- 需要隐藏的复选框选中的工站列表 -->
            <!--<el-table-column prop="Remark" v-if="show" show-overflow-tooltip label="备注" style=""></el-table-column>-->
            <!--<el-table-column prop="Remark" show-overflow-tooltip label="备注" style=""></el-table-column>-->
            <!--<el-table-column prop="Remark" show-overflow-tooltip label="备注" style=""></el-table-column>-->
            <!-- 修改和删除 -->
            <el-table-column prop="edit" label="操作">
                <template scope="scope">
                    <el-button
                            size="small"
                            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button
                            size="small"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
            <el-table-column prop="ModifyDate" sortable label="时间" style=""></el-table-column>
            <el-table-column prop="UserName" sortable label="用户" style=""></el-table-column>
        </el-table>

        <!-- 分页 -->
        <div class="block" style="text-align: right;padding: 4% 1% 0 0">       <!-- , jumper 加到layout里面 前往第 几 页     -->
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-size="PageCount" :page-sizes="[10, 20, 30, 40,50]"
                           :current-page="CurrentPage"  layout="total,sizes, prev, pager, next" :total="Total"></el-pagination>
        </div>
        <!-- 新增工序 -->
        <el-dialog title="新增工序" :visible.sync="addFormVisible">
            <el-form :model="form" >
                <el-form-item label="工序名称" :label-width="formLabelWidth">
                    <el-input v-model="form.ProcedureName" auto-complete="off" ></el-input>
                </el-form-item>
                <el-form-item label="工序内容" :label-width="formLabelWidth">
                    <el-input type="textarea" :autosize="{ minRows: 0, maxRows: 8}" v-model="form.ProcedureContent" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="备注" :label-width="formLabelWidth" >
                    <el-input type="textarea" :autosize="{ minRows: 0, maxRows: 8}" v-model="form.Remark" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="" :label-width="formLabelWidth" style="text-align: left">
                    <el-input v-model="WorkStationKey"  auto-complete="off" style="width: 180px;float: left;padding-right: 3%"></el-input>
                    <el-button @click="selectStationTable" label="">查询</el-button>
                </el-form-item>
                <!-- 新增工站!!! -->
                <el-form-item label="工站" :label-width="formLabelWidth" >
                    <el-table ref="multipleTable1"   @selection-change="handleSelectionChange" class="table_production" max-height="300"  stripe border :data="StationTableData" tooltip-effect="dark"
                              style="width: 100%;text-align: center !important;">
                        <el-table-column type="selection"  label="复选框"></el-table-column>
                        <el-table-column prop="index" label="序号"></el-table-column>
                        <el-table-column prop="WorkStationNum" label="工站号"></el-table-column>
                        <el-table-column prop="WorkStationName" label="工站名称"></el-table-column>
                        <el-table-column prop="WorkContent" show-overflow-tooltip label="工站内容" ></el-table-column>
                    </el-table>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="addFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="addForm">确 定</el-button>
            </div>
        </el-dialog>
        <!-- 删除工序   现在在做这个  -->
        <el-dialog title="删除工序" :visible.sync="DeleteFormVisible" style="">
            <el-form :model="formDelete">
                <el-form-item style="font-size: 18px;">
                    <!--  怎么把工站代码显示出来 -->
                    确定删除此工序吗？
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="DeleteFormVisible = false">取 消</el-button>
                <el-button type="danger" @click="DeleteForm" >确定</el-button>
            </div>
        </el-dialog>
        <!-- 修改工序 -->
        <el-dialog title="修改工序" :visible.sync="EditFormVisible" style="">
            <el-form :model="formEdit" style="text-align: left">
                <el-form-item label="工序号" :label-width="formLabelWidthEdit">
                    <!--${this.formEdit.WorkStationNum}   工站代码显示到这边，但不能修改  -->
                    <el-input v-model="formEdit.ProcedureNum" :disabled="true" style="width: 80%"></el-input>
                </el-form-item>
                <el-form-item label="工序名称" :label-width="formLabelWidthEdit">
                    <el-input v-model="formEdit.ProcedureName" auto-complete="off" style="width: 80%"></el-input>
                </el-form-item>
                <el-form-item label="工序内容" :label-width="formLabelWidthEdit">
                    <el-input type="textarea" :autosize="{ minRows: 0, maxRows: 8}" v-model="formEdit.ProcedureContent" auto-complete="off" style="width: 80%"></el-input>
                </el-form-item>
                <el-form-item label="工序备注" :label-width="formLabelWidthEdit">
                    <el-input type="textarea" :autosize="{ minRows: 0, maxRows: 8}" v-model="formEdit.Remark" auto-complete="off" style="width: 80%"></el-input>
                </el-form-item>
                <!-- 需要修改的  默认选中工站 ？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？ -->
                <el-form-item label="工站" :label-width="formLabelWidth" >
                    <el-table ref="multipleTable" @selection-change="handleSelectionChange2" class="table_production" max-height="300"  stripe border :data="StationTableData2" tooltip-effect="dark"
                              style="width: 90%;text-align: center !important;">
                        <el-table-column selected="check" type="selection" label="复选框"></el-table-column>
                        <el-table-column prop="index" label="序号"></el-table-column>
                        <el-table-column prop="WorkStationNum" label="工站号"></el-table-column>
                        <el-table-column prop="WorkStationName" label="工站名称"></el-table-column>
                        <el-table-column prop="WorkContent" show-overflow-tooltip label="工站内容" ></el-table-column>
                    </el-table>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="EditFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="EditForm">提 交</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script type="text/ecmascript-6">
    export default{
        data(){
            return{
                checked:true,
                //   工序 表格
                tableData:[],
                ProcedureNum:'',
                ProcedureName:'',
                ProcedureContent:'',
                Remark:'',
                edit:'',
                ModifyDate:'',
                UserName:'',
                //  分页
                PageCount:10 ,    // 每页几条   page-size
                CurrentPage:1,   // 当前是第几页
                Total:0,    // 总数
                // post 新增工序
                addFormVisible: false,
                StationTableData:[],
                form: {
                    ProcedureNum: '',
                    ProcedureName:'',
                    ProcedureContent: '',
                    Remark: '',
                    WorkStationKey:''  ,  //  查询的条件
                    WorkStationNumS: [],   //  复选框选中的工站号的集合
                },
                // 新增工序时，复选框  工站 表格的内容
                WorkStationNum:'',
                WorkStationName:'',
                WorkContent:'',
                WorkStationKey:''  ,  //  查询的条件
                formLabelWidth: '80px',
            //  修改工序
                //  修改工站（默认选中？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？、、、）
                check:[],    //  存放  选中的那几条工站信息
                StrArr:[],    //  修改时  用来放 选中  复选框的 集合
                StationTableData2:[] ,  //  修改时  工站 的  表格
                EditFormVisible: false,
//                formEdit:{},
                formEdit: {
                    WorkStationNumS: [],   //  复选框选中的工站号的集合
                },
                formLabelWidthEdit:'100',
                //  删除工序
                DeleteFormVisible: false,
                formDelete:{},
                formLabelWidthDelete:'100',
            }
        },
        methods: {
            //   get  传给后台值  供查询使用
            getData(url){
                this.$http.get(url,).then(response => {
                    // success callback   需要一个alert告诉你查询到了
                    this.tableData = [];
//                    console.log('数据请求成功url')
                    let Code = response.data.Code;
//                    console.log(response)
//                    console.log(url)
                    if (Code == 200) {   // 正常请求到数据
                        this.Total = response.data.Total;
                        for (let i = 0; i < response.data.ObjList.length; i++) {
                            this.tableData.push(response.data.ObjList[i]);
                            response.data.ObjList[i].index = i + 1;
                        }
//                        this.pageNum = this.tableData.length/10;
                    }

                }, response => {
                    console.log("     表格添加失败")
//                    console.log(response)
                })
            },
            selectTable(){    // 校验输入信息正确性 ，不对直接  return
                let url;
                //     加的判断  如果车间是空，则是 0
                this.isLoding = true;
                this.ProcedureNum = this.ProcedureNum.trim();  // 1、 去空格判断
                this.ProcedureName = this.ProcedureName.trim();
                if (this.ProcedureNum.length === 0) {   // 2、工站号和车间为空时，传给后台 为 0
                    url = "http://192.168.3.238:8088/ProcessManagement/GetProcedurePage?ProcedureNum=" + 0 + "&ProcedureName=" +
                        this.ProcedureName + "&PageCount=" + this.PageCount + "&CurrentPage=" + this.CurrentPage;
                } else {
                    url = "http://192.168.3.238:8088/ProcessManagement/GetProcedurePage?ProcedureNum=" + this.ProcedureNum + "&ProcedureName=" +
                        this.ProcedureName + "&PageCount=" + this.PageCount + "&CurrentPage=" + this.CurrentPage;
                }
                this.getData(url)
            },
            //    分页
            handleSizeChange(val) {
                this.PageCount = val;   //  每页几条
                this.selectTable();
            },
            handleCurrentChange(val) {
                this.CurrentPage = val;   // 当前是第几页
                this.selectTable();     //  点击分页的时候
            },
            //   新增工序
            add() {
                this.addFormVisible = true;
            },
            addForm(){     //   post
                let JobNumber = 1;
                let addUrl = "http://192.168.3.238:8088/ProcessManagement/AddProcess";
                let addForm = {
                    "ProcedureNum": this.form.ProcedureNum,
                    "ProcedureName": this.form.ProcedureName,
                    "ProcedureContent": this.form.ProcedureContent,
                    "Remark": this.form.Remark,
                    "JobNumber": JobNumber,
                    "WorkStationKey": this.form.WorkStationKey,   //  搜索
                    "WorkStationNumS": this.form.WorkStationNumS,  //  复选框选中的工站号的集合
                };
                console.log("传过去的是空吗")
                console.log(addForm)
                console.log(addUrl)
                let that = this;
                if (this.form.ProcedureName.length === 0) {
                    console.log("请输入工序名称");
                    return 0;
                } else {
                    this.$http.post(addUrl, addForm, {
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded'
                        }
                    })
                        .then(function (response) {
                            that.addFormVisible = false;
                            that.selectTable();
                            console.log("添加成功");
                            console.log(response);
//                        需要提示
                        })
                        .catch(function (error) {
                            console.log(error);
                            console.log("错误");
                        });
                }
            },
            //  新增工序里  表格的复选框处理
            handleSelectionChange(val) {
                this.form.WorkStationNumS = [];
                for (let i = 0; i < val.length; i++) {
                    this.form.WorkStationNumS.push(val[i].WorkStationNum);
                }
                this.form.checkBox = val ;
                console.log("checkBox里面回事什么呢");
//                console.log(this.form.WorkStationNumS);
                console.log(this.form.checkBox);
            },
            // get 新增工序里 所有工站信息的展示
            getDataStation(url){
                this.$http.get(url,).then(response => {
                    // success callback   需要一个alert告诉你查询到了
                    console.log("response")
                    console.log(response)
                    this.StationTableData = [];
                    let Code = response.data.Code;
                    if (Code == 200) {   // 正常请求到数据
                        this.Total = response.data.Total;
                        for (let i = 0; i < response.data.ObjList.length; i++) {
                            this.StationTableData.push(response.data.ObjList[i]);
                            response.data.ObjList[i].index = i + 1;
                        }
                    }
                }, response => {
                    console.log(" 表格添加失败")
                    console.log(response)
                })
            },
            selectStationTable(){    // 校验输入信息正确性 ，不对直接  return
                let url;
                this.isLoding = true;
                url = "http://192.168.3.238:8088/WorkStationManager/GetWorkStationPage?WorkStationKey=" + this.WorkStationKey;
                console.log("url")
                console.log(url)
                this.getDataStation(url)
            },
            //   工序信息删除
            handleDelete(index, row) {
                this.DeleteFormVisible = true;
                this.formDelete = row;
                console.log("删除");
                console.log(row);
            },
            DeleteForm(){
                let DeleteUrl = "http://192.168.3.238:8088/ProcessManagement/DeleteProcess";
                let deleteItem = {   //  跟后端约定好的JSON格式
                    "ProcedureNum": this.formDelete.ProcedureNum
                };
                console.log(this.formDelete.ProcedureNum);
                let that = this;  //   that管用吗   管用的，想自动刷新就在执行成功的方法里重新  searchTable 就行了
                this.$http.post(DeleteUrl, deleteItem, {
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    }
                })
                    .then(function (response) {
                        console.log("删除成功");
                        console.log(response)
                        that.DeleteFormVisible = false;     //  关闭窗口
                        that.selectTable();
//                        需要提示
                    })
                    .catch(function (error) {
                        console.log("错误");
                        console.log(error);
                    });

            },
//      在修改工序的时候，点击编辑获取 WorkStationNumS 和 所有工站的集合 ，然后做默认选中
//          修改工序
            handleEdit(index, row) {
                //  获取工站的集合   并默认选中的行数 》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》
                this.formEdit = row ;
                this.formEdit.ProcedureNum = row.ProcedureNum ;
                this.selectStationTable2();   //  修改工序里面的  工站表格
                this.EditFormVisible = true;
                this.toggleSelection(this.StrArr);    //  默认选中
                console.log("默认选中 《《《《《《《《《《《《《《《《《《《")
                console.log(this.StrArr) ;   //  有数据 》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》
            },
            EditForm() {    //   post
                this.judge();    //  判断WorkStationNumS为空时，置为 '' , 否则会是 undefined , 传到后台报错
                let JobNumber = 1 ;
                let EditUrl = "http://192.168.3.238:8088/ProcessManagement/UpdateProcess";
                let EditForm = {
                    "ProcedureNum": this.formEdit.ProcedureNum,
                    "ProcedureName": this.formEdit.ProcedureName,
                    "ProcedureContent": this.formEdit.ProcedureContent,
                    "Remark": this.formEdit.Remark,
                    "JobNumber": JobNumber,
                    "WorkStationNumS":this.formEdit.WorkStationNumS,  //  复选框选中的工站号的集合
                }
                console.log("打印  修改的参数  WorkStationNumS  》》》》》》》》》")
                console.log(this.formEdit.WorkStationNumS)
                console.log(EditForm)
                let that = this ;
                this.$http.post(EditUrl, EditForm, {
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    }
                })
                    .then(function (response) {
                        that.EditFormVisible = false;
                        that.selectTable();
                        console.log("修改成功");
                        console.log(response);
//                        需要提示
                    })
                    .catch(function (error) {
                        console.log("错误");
                        console.log(error);
                    });
            },
            //   工站集合   默认选中   的方法
            // get 修改工序里 所有工站信息的展示
            selectStationTable2(){
                let url;
                this.isLoding = true;
                url = "http://192.168.3.238:8088/ProcessManagement/GetProcedureByNum?ProcedureNum=" + this.formEdit.ProcedureNum ;
                this.$http.get(url,).then(response => {
                    // success callback   需要一个alert告诉你查询到了
                    this.StrArr = response.data.StrID;
//                    console.log("this.data.StrID!!!")
//                    console.log(response.data.ObjList)
                    this.StationTableData2 = [];
                    let Code = response.data.Code;
                    if (Code == 200) {   // 正常请求到数据
                        this.Total = response.data.Total;
                        for (let i = 0; i < response.data.ObjList.length; i++) {
                            this.StationTableData2.push(response.data.ObjList[i]);
                            response.data.ObjList[i].index = i + 1;
                            if(response.data.ObjList[i].XChecked == true){
                                this.check.push(response.data.ObjList[i]);
                            }
                        }
                        console.log('工站选中的是哪几条')
                        console.log('工站表格添加成功')
                    }
                }, response => {
                    console.log("工站表格添加失败")
                    console.log(response)
                })
            },
            //  默认选中  的方法  ？？？？？？？？？？？？!!!!!!!!!!!!!!!!!!!!!!!!!!
            toggleSelection(rows) {
                console.log(" 我现在点击了 默认选中的rows  >>>>>>>>>>>>>>>>>  ");
                console.log(rows);
                if (rows) {
                    rows.forEach(row => {
                        this.$refs.multipleTable.toggleRowSelection(row);
                    });
                } else {
                    this.$refs.multipleTable.clearSelection();
                }
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            //  修改工序里  表格的复选框  修改后提交的数组  处理
            handleSelectionChange2(val) {
                this.formEdit.WorkStationNumS = [];
                for (let i = 0; i < val.length; i++) {
                    this.formEdit.WorkStationNumS.push(val[i].WorkStationNum);
                }
            },
            //  判断  空
            judge(){
                if(this.formEdit.WorkStationNumS.length == 0){
                    this.formEdit.WorkStationNumS = '' ;
                }
            }
        },
        mounted :function () {   //  onload
            this.selectTable();
            this.selectStationTable();   //  form 一打开就加载表格
        }
    }
</script>

<style>
    * {
        padding: 0;
    }
    html,
    body {
        height: 100%;
        width: 100%;
        overflow: hidden;
        margin: 0;
    }
    /* 表头内容居中 */
    .table_production thead tr th {
        text-align: center;
    }
</style>